<template>
  <div class="personCenter">
    <div class="personInfo">
      <p>个人中心</p>
      <p>
        <span>鲸友{{nickName}}</span>
        <span style="margin-left: 20px">昨日收益：
					<span style="font-size: 20px;margin-right: 0px"> {{yesterdayEarn}}</span>
					FIL
				</span>
        <span style="margin-left: 20px">FIL当前价格：
					<span style="font-size: 20px;margin-right: 0px"> {{currentPrice}}</span>
					USTD
				</span>
      </p>
      <div class="account">
        <div>
          <span>账户余额</span>
          <p>
            <span class="accountNum">{{personInfoData.balance}}</span>
            FIL
          </p>
        </div>
        <div>
          <span>可用余额</span>
          <a-button class="add" @click="visible1 = true,sendText2 = '获取邮箱验证码',disabled2 = false">兑换USDT</a-button>
          <p>
            <span class="accountNum">{{personInfoData.available}}</span>
            FIL
          </p>
        </div>
        <div>
          <span>锁仓账户</span>
          <p>
            <span class="accountNum">{{personInfoData.locked}}</span>
            FIL
          </p>
        </div>
        <div>
          <span>算力券</span>
          <p>
            <span class="accountNum">{{personInfoData.card}}</span>
            T
          </p>
        </div>
        <div>
          <span>USDT余额</span>
          <a-button class="add" @click="rechargeMoney" :loading="loading">充值</a-button>
          <a-button class="add" @click="visible2 = true,sendText2 = '获取邮箱验证码',disabled2 = false">提现</a-button>
          <p>
            <span class="accountNum">{{personInfoData.usdt}}</span>
            USDT
          </p>
        </div>
      </div>
      <div class="account1">
        <div class="account2">
          <div>
            <span>账户余额</span>
            <p>
              <span class="accountNum">{{personInfoData.balance}}</span>
              FIL
            </p>
          </div>
          <div>
            <span>可用余额</span>
            <a-button class="add">兑换USDT</a-button>
            <p>
              <span class="accountNum">{{personInfoData.available}}</span>
              FIL
            </p>
          </div>
          <div>
            <span>锁仓账户</span>
            <p>
              <span class="accountNum">{{personInfoData.locked}}</span>
              FIL
            </p>
          </div>
        </div>
        <div class="account2">
          <div>
            <span>算力券</span>
            <p>
              <span class="accountNum">{{personInfoData.card}}</span>
              T
            </p>
          </div>
          <div>
            <span>USDT余额</span>
            <a-button class="add" @click="rechargeMoney">充值</a-button>
            <a-button class="add" @click="visible2 = true">提现</a-button>
            <p>
              <span class="accountNum">{{personInfoData.usdt}}</span>
              USDT
            </p>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model="visible1" title="余额兑换" :footer="null">
      <a-form-model :model="form6" :label-col="{span: 4}" :wrapper-col="{span: 14}">
        <a-form-model-item label="认证邮箱">
          <span>{{currentBindEmail}}</span>
        </a-form-model-item>
        <a-form-model-item label="当前价格">
          <span>{{currentPrice}} USTD</span>
          <span style="font-size: 12px;margin-left: 10px;">(实际兑换价格以兑换时为准)</span>
        </a-form-model-item>
        <a-form-model-item label="兑换数量">
          <a-input v-model="form6.num"/>
        </a-form-model-item>
        <a-form-model-item label="邮箱验证码" prop="emailCode">
          <a-input v-model="form6.emailCode" placeholder="请输入邮箱验证码">
            <a slot="addonAfter" @click="sendEmail1('exchangeAmount')" :disabled="disabled2">
              {{sendText2}}
            </a>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="submitDuiH" style="float: right">确定
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal v-model="visible2" title="提现" :footer="null">
      <a-form-model :model="form7" :label-col="{span: 6}" :wrapper-col="{span: 14}">
        <a-form-model-item label="认证邮箱">
          <span>{{currentBindEmail}}</span>
        </a-form-model-item>
        <a-form-model-item label="每笔扣除手续费">
          <span>5 USDT</span>
        </a-form-model-item>
        <a-form-model-item label="提现地址">
          <a-select v-model="form7.address">
            <a-select-option :value="item.id" v-for="(item,index) in data1" :key="index">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="提现数量">
          <a-input v-model="form7.num"/>
        </a-form-model-item>
        <a-form-model-item label="邮箱验证码" prop="emailCode">
          <a-input v-model="form7.emailCode" placeholder="请输入邮箱验证码">
            <a slot="addonAfter" @click="sendEmail1('applyExtractCash')" :disabled="disabled2">
              {{sendText2}}
            </a>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="submitTiX" style="float: right">确定
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <div class="personShow">
      <a-row :gutter="30">
        <a-col :span="6">
          <div class="left">
            <div class="menu2">
              <p class="menuTitle">钱包管理</p>
              <div class="borderLine"></div>
              <p @click="tabName = '钱包管理 / 余额账户'" :class="tabName == '钱包管理 / 余额账户' ? 'selectP' : ''">余额账户
              </p>
              <p @click="tabName = '钱包管理 / 锁仓账户'" :class="tabName == '钱包管理 / 锁仓账户' ? 'selectP' : ''">锁仓账户
              </p>
              <p @click="tabName = '钱包管理 / 资金明细'" :class="tabName == '钱包管理 / 资金明细' ? 'selectP' : ''">资金明细
              </p>
              <p @click="tabName = '钱包管理 / 订单记录'" :class="tabName == '钱包管理 / 订单记录' ? 'selectP' : ''">订单记录
              </p>
              <p @click="tabName = '钱包管理 / 提现记录'" :class="tabName == '钱包管理 / 提现记录' ? 'selectP' : ''">
                提现记录
              </p>
            </div>
            <div class="menu1">
              <p class="menuTitle">个人中心</p>
              <div class="borderLine"></div>
              <p @click="tabName = '个人中心 / 邮箱绑定'" :class="tabName == '个人中心 / 邮箱绑定' ? 'selectP' : ''">邮箱绑定
              </p>
              <p @click="tabName = '个人中心 / 实名认证'" :class="tabName == '个人中心 / 实名认证' ? 'selectP' : ''">实名认证
              </p>
              <p @click="tabName = '个人中心 / USDT提现地址'"
                 :class="tabName == '个人中心 / USDT提现地址' ? 'selectP' : ''">地址管理</p>
              <p @click="tabName = '个人中心 / 修改登录密码'" :class="tabName == '个人中心 / 修改登录密码' ? 'selectP' : ''">
                修改登录密码</p>
            </div>
          </div>
        </a-col>
        <a-col :span="18">
          <div class="right">
            <p class="title">{{tabName}}</p>
            <div v-if="tabName == '个人中心 / 邮箱绑定'" class="single">
              <p v-if="showEmail" style="text-align: center;font-size: 16px;padding: 40px">
                您的认证邮箱：{{currentBindEmail}}</p>
              <bind-email v-if="!showEmail" @showBindEmail="showBindEmail"></bind-email>
            </div>
            <div v-if="tabName == '个人中心 / 实名认证'" class="single">
              <p style="text-align: left;font-size: 16px;padding: 40px">
                <span>认证状态：{{remarkStatus}}</span>
                <span v-if="remarkStatus == '认证失败，请重新认证！'? true : false">
                  原因：<span style="color:#ff0000;">{{remark}}</span>
                </span>
              </p>
              <real-name-approve
                v-if="remarkStatus == '您已完成实名认证！' || remarkStatus == '待认证！' ? false : true"></real-name-approve>
            </div>
            <div v-if="tabName == '个人中心 / USDT提现地址'" style="position: relative">
              <a-button class="add" @click="visible = true">添加</a-button>
              <a-table :columns="columns1" :data-source="data1" @change="pageChange" :rowKey="rowKey"
                       :pagination="pagination">
                <template slot="operate" slot-scope="text, record">
                  <a-button type="primary" size="small" @click="updateAddress(record)">修改</a-button>
                </template>
              </a-table>
              <a-modal v-model="visible" title="USDT提现地址(TRC)" @ok="handleOk">
                <a-form-model :model="form2" :label-col="{span: 6}" :wrapper-col="{span: 14}">
                  <a-form-model-item label="认证邮箱">
                    <span>{{currentBindEmail}}</span>
                  </a-form-model-item>
                  <a-form-model-item label="地址名称">
                    <a-input v-model="form2.name"/>
                  </a-form-model-item>
                  <a-form-model-item label="提现地址">
                    <a-input v-model="form2.address"/>
                  </a-form-model-item>
                  <a-form-model-item label="邮箱验证码" prop="emailCode">
                    <a-input v-model="form2.emailCode" placeholder="请输入邮箱验证码">
                      <a slot="addonAfter" @click="sendEmail1('accountAddressAdd')" :disabled="disabled2">
                        {{sendText2}}
                      </a>
                    </a-input>
                  </a-form-model-item>
                </a-form-model>
              </a-modal>
            </div>
            <div v-if="tabName == '个人中心 / 修改登录密码'">
              <change-pass-word></change-pass-word>
            </div>
            <div v-if="tabName == '钱包管理 / 余额账户'" style="position: relative">
              <balance-account></balance-account>
            </div>
            <div v-if="tabName == '钱包管理 / 锁仓账户'">
              <div class="tabTitle">
                <p>累计锁仓</p>
                <div></div>
                <p>{{personInfoData.locked}}</p>
              </div>
              <lock-account></lock-account>
            </div>
            <div v-if="tabName == '钱包管理 / 资金明细'">
              <money-details></money-details>
            </div>
            <div v-if="tabName == '钱包管理 / 订单记录'">
              <order-record></order-record>
            </div>
            <div v-if="tabName == '钱包管理 / 提现记录'">
              <withdrawal-record></withdrawal-record>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

  </div>
</template>

<script>
  import {
    getAccountDetail,
    addAccountAddress,
    getAccountAddresses,
    getUserInfo,
    yesterdayIncome,
    updateAccountAddress,
    getAccountAddressDetail,
    getRechargeAddress,
    getFilInfo,
    amountExchange,
    applyExtractCash,
    sendBizEmailCode
  } from '../serves/index'
  import { eventBus } from '@/eventBus'
  import { setLocalStorage } from "../serves/localStorage"
  import { columns1 } from './columns'
  import BalanceAccount from './personCenter/BalanceAccount'
  import LockAccount from './personCenter/LockAccount'
  import MoneyDetails from './personCenter/MoneyDetails'
  import OrderRecord from './personCenter/OrderRecord'
  import WithdrawalRecord from './personCenter/WithdrawalRecord'
  import BindEmail from './personCenter/BindEmail'
  import RealNameApprove from './personCenter/RealNameApprove'
  import ChangePassWord from './personCenter/ChangePassWord'

  export default {
    name: "PersonalCenter",
    components: {
      BalanceAccount,
      LockAccount,
      MoneyDetails,
      OrderRecord,
      WithdrawalRecord,
      BindEmail,
      RealNameApprove,
      ChangePassWord
    },
    data() {
      return {
        form6: {
          num: '',
          emailCode: ''
        },
        form7: {
          num: '',
          address: '',
          emailCode: ''
        },
        visible1: false,
        visible2: false,
        reload: true,
        tabsList: {
          email: '个人中心 / 邮箱绑定',
          realName: '个人中心 / 实名认证',
          address: '个人中心 / USDT提现地址',
          google: '安全设置 / 谷歌验证'
        },
        tabName: '钱包管理 / 余额账户',
        checked: false,
        updateAdd: true,
        updateId: '',
        form2: {
          address: '',
          name: '',
          emailCode: ''
        },
        sendText1: '获取邮箱验证码',
        sendText2: '获取邮箱验证码',
        disabled2: false,
        timer4: null,
        columns1,
        data1: [],
        pagination: {
          current: 1,
          total: 0,
          pageSize: 20,
          showSizeChanger: true,
          showTotal: total => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50'],
        },
        lastPageSize: 10,
        visible: false,
        nickName: '',
        personInfoData: {},
        yesterdayEarn: '',
        currentPrice: '', // 当前价格
        timer: null,
        loading: false,
        showEmail: false,
        remarkStatus: '',
        remark: '',
        currentBindEmail: ''
      }
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    },
    mounted() {
      if (this.$route.query.tabName) {
        this.tabName = this.tabsList[this.$route.query.tabName]
      }
      this.getAccountData()
      this.getEarningIncome()
      this.getUserInfo()
      this.getAccAddresses()
      this.getCurrentPrice()
      this.getTiXian()
    },
    methods: {
      // 邮箱绑定后状态返回
      showBindEmail(val1, val2) {
        this.currentBindEmail = val1
        this.showEmail = val2
      },
      getAccountData() {
        getAccountDetail().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.personInfoData = res.data.data
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 兑换
      submitDuiH() {
        if (this.form6.num > this.personInfoData.total) {
          this.$message.warning('兑换数大于余额')
          return false
        }
        let params = {
          amount: this.form6.num,
          emailCode: this.form6.emailCode
        }
        amountExchange(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('兑换成功！')
            this.visible1 = false
            this.getAccountData()
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push('login')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 提现
      submitTiX() {
        if (this.personInfoData.usdt < this.form7.num) {
          this.$message.warning('提现金额超出余额，请修改！');
          return false;
        }
        let params = {
          amount: this.form7.num,
          addressId: this.form7.address,
          emailCode: this.form7.emailCode
        }
        applyExtractCash(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('提现成功！')
            this.visible2 = false
            this.getAccountData()
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push('login')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 获取当前价格
      getCurrentPrice() {
        getFilInfo().then(res => {
          if (res.status == 200 && res.data.code == 200) {
            this.currentPrice = res.data.data.newlyPrice
          }
        })
        this.timer = setTimeout(() => {
          this.getCurrentPrice()
        }, 1000 * 60)
      },
      // 充值
      rechargeMoney() {
        this.loading = true
        getRechargeAddress().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            window.open(res.data.data, '_self')
            this.loading = false
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 获取邮箱验证码
      sendEmail1(val) {
        if (!this.currentBindEmail) {
          this.$message.warning('邮箱未绑定，请先绑定！')
          return
        }

        if (val === 'exchangeAmount' && !this.form6.num) {
          this.$message.warning('请输入有效数量！')
          return
        }

        if (val === 'applyExtractCash' && !this.form7.address) {
          this.$message.warning('请选择提现地址！')
          return
        }

        if (val === 'applyExtractCash' && !this.form7.num) {
          this.$message.warning('请输入有效数量！')
          return
        }

        if (val === 'accountAddressAdd' && !this.form2.address) {
          this.$message.warning('请输入提现地址！')
          return
        }

        if (val === 'accountAddressAdd' && !this.form2.name) {
          this.$message.warning('请输入地址名称！')
          return
        }
        this.sendText1 = `60s后重新发送`
        this.disabled2 = true
        this.setTime2(60)
        let params = {
          data: val
        }
        sendBizEmailCode(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('发送成功！')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 提现地址翻页
      pageChange(val) {
        this.pagination.pageSize = val.pageSize
        if (val.pageSize != this.lastPageSize) {
          this.pagination.current = 1
          this.lastPageSize = val.pageSize
        } else {
          this.pagination.current = val.current
        }
        this.getAccAddresses()
      },
      // 添加提现地址
      handleOk() {
        this.visible = false
        if (this.updateAdd) {
          addAccountAddress(this.form2).then(res => {
            if (res.status == 200 && res.data.status.code == 200) {
              this.$message.success('添加成功！')
              this.getAccAddresses()
              for (let k in this.form2) {
                this.form2[k] = ''
              }
            } else if (res.data.status.code == 450) {
              this.$message.warning(res.data.message)
              this.$router.push({
                path: '/login'
              })
              eventBus.$emit('isShow', false);
            } else {
              this.$message.warning(res.data.message)
            }
          })
        } else {
          let params = {
            address: this.form2.address,
            name: this.form2.name,
            tradePassword: this.form2.tradePassword,
            id: this.updateId,
          }
          updateAccountAddress(params).then(res => {
            if (res.status == 200 && res.data.status.code == 200) {
              this.$message.success('修改成功！')
              this.updateAdd = true
              this.getAccAddresses()
              for (let k in this.form2) {
                this.form2[k] = ''
              }
            } else if (res.data.status.code == 450) {
              this.$message.warning(res.data.message)
              this.$router.push({
                path: '/login'
              })
              eventBus.$emit('isShow', false);
            } else {
              this.$message.warning(res.data.message)
            }
          })
        }
      },
      // 获取提现地址列表
      getAccAddresses() {
        let params = {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
        getAccountAddresses(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.data1 = res.data.data.records
            this.pagination.total = res.data.data.total
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 更新提现地址
      updateAddress(val) {
        this.updateAdd = false
        this.visible = true
        this.form2.address = val.address
        this.form2.name = val.name
        this.updateId = val.id
        this.sendText2 = '获取邮箱验证码'
        this.disabled2 = false
      },
      // 地址详情
      getDetail(val) {
        let params = {
          id: val.id
        }
        getAccountAddressDetail(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.data4 = [res.data.data]
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 获取登录用户信息
      getUserInfo() {
        getUserInfo().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            let result = res.data.data
            this.nickName = result.phone ? result.phone.substring(result.phone.length - 4) : result.email.substring(0, 4)
            this.currentBindEmail = result.email
            this.showEmail = result.email ? true : false
            this.remark = result.remark
            if (result.realNameVerificationStatus == 3) {
              this.remarkStatus = '您已完成实名认证！'
            } else if (result.realNameVerificationStatus == 2) {
              this.remarkStatus = '认证失败，请重新认证！'
            } else if (result.realNameVerificationStatus == 1) {
              this.remarkStatus = '待认证！'
            } else {
              this.remarkStatus = '用户未提交认证！'
            }
            setLocalStorage('nickName', this.nickName)
            eventBus.$emit('nickName', this.nickName);
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      getEarningIncome() {
        yesterdayIncome().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.yesterdayEarn = res.data.data
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      setTime2(num) {
        if (num <= 1) {
          this.sendText2 = `重新发送`
          this.disabled2 = false
          clearTimeout(this.timer4)
          return false
        } else {
          this.disabled2 = true
          num--
        }
        this.sendText2 = `${num}s后重新发送`
        this.timer4 = setTimeout(() => {
          this.setTime2(num)
        }, 1000)
      },
      rowKey(record, index) {
        return index
      }
    }
  }
</script>

<style lang="scss">
  .personCenter {
    .personInfo {
      text-align: left;
      color: #fff;
      height: 400px;
      background: linear-gradient(to bottom, #4005C6 0%, #1E0294 100%);
      padding: 50px 200px;

      .add {
        border-radius: 20px;
        margin-left: 10px;
        color: #fff;
        background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
        border: none;
        // position: absolute;
        // left: 200px;
        // top: -45px;
      }

      p:nth-child(1) {
        font-size: 30px;
        font-weight: 700;
      }

      p:nth-child(2) {
        padding: 20px 0px 50px;
        font-weight: 700;

        span {
          margin-right: 20px;
        }
      }

      .account1 {
        display: none;
      }

      .account {
        display: flex;
        justify-content: space-between;

        .accountNum {
          font-size: 28px;
        }
      }
    }

    .personShow {
      padding: 50px 200px;
      text-align: center;

      .left {
        box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
        font-size: 18px;
        padding: 30px 0px;

        .menuTitle {
          color: #380CF4;
          font-weight: 700;
          margin-top: 10px;
        }

        p {
          cursor: pointer;
          padding: 10px 0px;
          margin: 0px;
        }

        .selectP {
          background-color: #EBE6FD;
        }

        .borderLine {
          height: 2px;
          background: linear-gradient(to right, #ffffff 0%, #ffffff 30%, #380CF4 50%, #ffffff 70%, #ffffff 100%);
          margin-bottom: 40px;
        }
      }

      .right {
        box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
        padding: 30px;
        text-align: left;

        .title {
          font-size: 18px;
          margin-top: 10px;
        }

        .ant-form {
          .ant-form-item-label {
            text-align: center;
          }

          .modify {
            border-radius: 20px;
            margin-left: 10px;
            color: #fff;
            background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
          }
        }

        .ant-form label {
          font-size: 16px;
        }

        .add {
          border-radius: 20px;
          margin-left: 10px;
          color: #fff;
          background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
          position: absolute;
          left: 200px;
          top: -45px;
        }

        .ant-modal-mask {
          background-color: rgba(0, 0, 0, 0.7);
        }

        .ant-modal-footer {
          text-align: center;
        }

        .tabTitle {
          font-size: 16px;

          div {
            height: 2px;
            background: linear-gradient(to right, #ffffff 0%, #ccc 50%, #ffffff 100%);
            margin-bottom: 15px;
          }

          p:nth-child(3) {
            font-weight: 700;
            color: #380CF4;
          }
        }

        .sureBtn {
          background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
          color: #fff;
          font-size: 18px;
          width: 180px;
          border-radius: 20px;
        }

        .goole-input {
          width: 300px;
        }

        .goole-input-text {
          margin-left: 20px;
        }

        .erwei {
          display: flex;
          align-items: center
        }

        .starRiverKey {
          width: 300px;
        }

        .authentication {
          padding: 0px 60px;

          .sureBtn {
            margin-top: 20px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 800px) {
    .personCenter {
      .personInfo {
        height: auto;
        padding: 10px;

        p:nth-child(1) {
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 15px;
        }

        p:nth-child(2) {
          font-weight: 700;
          padding: 10px 0px;

          span {
            margin-right: 5px;
          }
        }

        .account {
          display: none;
        }

        .account1 {
          display: block;

          .account2 {
            display: flex;
            justify-content: space-between;

            .accountNum {
              font-size: 16px;
            }
          }
        }
      }

      .personShow {
        padding: 10px;
        text-align: center;

        .ant-col-6 {
          padding-right: 5px !important;
        }

        .ant-col-18 {
          padding-left: 5px !important;
        }

        .left {
          font-size: 12px;
          padding: 20px 0px;

          p {
            cursor: pointer;
            padding: 10px 0px;
            margin: 0px;
          }


          .borderLine {
            margin-bottom: 20px;
          }
        }

        .right {
          box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
          padding: 10px;
          text-align: left;

          .title {
            font-size: 12px;
            margin-top: 10px;
          }

          .ant-form {
            .ant-form-item-label {
              text-align: center;
              width: auto;
            }

            .modify {
              border-radius: 20px;
              margin-left: 10px;
              color: #fff;
              background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
            }
          }

          .ant-form label {
            font-size: 14px;
          }

          .add {
            border-radius: 20px;
            margin-left: 10px;
            color: #fff;
            background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
            position: absolute;
            left: 180px;
            top: -35px;
          }

          .ant-table-thead > tr > th,
          .ant-table-tbody > tr > td {
            padding: 10px;
          }

          .ant-col-offset-4 {
            margin-left: 0px;
          }

          .ant-modal-mask {
            background-color: rgba(0, 0, 0, 0.7);
          }

          .ant-modal-footer {
            text-align: center;
          }

          .tabTitle {
            font-size: 14px;

            div {
              height: 2px;
              background: linear-gradient(to right, #ffffff 0%, #ccc 50%, #ffffff 100%);
              margin-bottom: 15px;
            }

            p:nth-child(3) {
              font-weight: 700;
              color: #380CF4;
            }
          }

          .sureBtn {
            background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
            color: #fff;
            font-size: 16px;
            width: 180px;
            border-radius: 20px;
          }

          .goole-input {
            width: 200px;
          }

          .goole-input-text {
            display: block;
            margin-left: 10px;
            text-align: right;
            padding: 10px 0px;
          }

          .erwei {
            display: block;
          }

          .starRiverKey {
            width: auto;
          }

          .authentication {
            padding: 0px 10px;
          }
        }
      }
    }
  }
</style>
